<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .f{
            border: 1px solid #000;
            margin: 20px;
        }
        /* 
        在产生浮动元素的父元素上，生成一个空块元素（清除浮动）
         */
        .clearfix::after{
            content: "123";
            display: block;
            clear: both;
            width: 0;
            height: 0;
            font-size: 0;
        }
        .f .s{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: #f00;
            float: left;
        }
        .f .s:nth-child(1){
            background-color: #f00;
        }
        .f .s:nth-child(2){
            background-color: #0f0;
        }
        .f .s:nth-child(3){
            background-color: #00f;
        }
        .f .s:nth-child(4){
            background-color: #f0f;
        }
    </style>
</head>
<body>
    <!-- 
        浮动
            选择符
            盒模型
            浮动、定位
        浮动原理
            某元素浮动之后,
                1. 脱离标准流(常规流)
                2. 向左或右浮动
                    如果有，浮动到上一个同方向浮动兄弟元素的边缘。
                    否则，浮动到父元素的边缘。
            浮动之后，一定要清除。
                在产生浮动元素的父元素上添加clearfix类
                .clearfix::after{
                    content: "";
                    display: block;
                    clear: both;
                    width: 0;
                    height: 0;
                    font-size: 0;
                }
        
        标准流（常规流），默认的样式。
            块元素 
                自己独占一行
                从上往下排
            行内元素
                自己不独占一行
                从左往右依次，一行不够换行。
            
            父子元素
                父元素包含子元素
        
        当某个元素脱离常规流，意味着它的第弟和它的祖先会认为它不在。

        浮动在什么场合使用。
            有很多个块元素需要横排的时候。
            让两个或以上块状元素脱离常规流，实现复杂布局。
     -->
    <div class="f clearfix">
        <div class="s"></div>
        <div class="s"></div>
        <div class="s"></div>
        <div class="s"></div>
    </div>
    <div class="f clearfix">
        <div class="s">1</div>
        <div class="s">2</div>
        <div class="s">3</div>
        <div class="s">4</div>
    </div>
    <div class="f clearfix">
        <div class="s">1</div>
        <div class="s">2</div>
        <div class="s">3</div>
        <div class="s">4</div>
    </div>
</body>
</html>